<script setup lang="ts">
const props = defineProps<{
  tableData: Array<any>
  print: Array<any>
}>()
</script>
<template>
  <div
    style="
      display: flex;
      font-size: 16px;
      width: 120px;
      justify-content: space-between;
      margin: 0 20px 20px 20px;
    "
  >
    <p style="margin-top: 10px">{{ props.print[0].print1 }}</p>
    <p style="margin-top: 10px">{{ props.print[0].print2 }}</p>
  </div>
  <div class="table-box">
    <table>
      <tr class="colorTd">
        <td>经销商ID</td>
        <td>姓名</td>
        <td>当前星级</td>
        <td>升级星级</td>
      </tr>
      <tr class="colorTd">
        <td>
          {{ props.tableData[0].id }}
        </td>
        <td style="color: #00edff">
          {{ props.tableData[0].name }}
        </td>

        <td style="color: #00edff">
          {{ props.tableData[0].star }}
        </td>
        <td style="color: #00edff">
          {{ props.tableData[0].frameworkLevel }}
        </td>
      </tr>
      <tr class="colorTd">
        <td>
          {{ props.tableData[0].id }}
        </td>
        <td style="color: #00edff">
          {{ props.tableData[0].name }}
        </td>

        <td style="color: #00edff">
          {{ props.tableData[0].star }}
        </td>
        <td style="color: #00edff">
          {{ props.tableData[0].frameworkLevel }}
        </td>
      </tr>
      <tr class="colorTd">
        <td>
          {{ props.tableData[0].id }}
        </td>
        <td style="color: #00edff">
          {{ props.tableData[0].name }}
        </td>

        <td style="color: #00edff">
          {{ props.tableData[0].star }}
        </td>
        <td style="color: #00edff">
          {{ props.tableData[0].frameworkLevel }}
        </td>
      </tr>
      <tr class="colorTd">
        <td>
          {{ props.tableData[0].id }}
        </td>
        <td style="color: #00edff">
          {{ props.tableData[0].name }}
        </td>

        <td style="color: #00edff">
          {{ props.tableData[0].star }}
        </td>
        <td style="color: #00edff">
          {{ props.tableData[0].frameworkLevel }}
        </td>
      </tr>
      <tr class="colorTd">
        <td>
          {{ props.tableData[0].id }}
        </td>
        <td style="color: #00edff">
          {{ props.tableData[0].name }}
        </td>

        <td style="color: #00edff">
          {{ props.tableData[0].star }}
        </td>
        <td style="color: #00edff">
          {{ props.tableData[0].frameworkLevel }}
        </td>
      </tr>
      <tr class="colorTd">
        <td>
          {{ props.tableData[0].id }}
        </td>
        <td style="color: #00edff">
          {{ props.tableData[0].name }}
        </td>

        <td style="color: #00edff">
          {{ props.tableData[0].star }}
        </td>
        <td style="color: #00edff">
          {{ props.tableData[0].frameworkLevel }}
        </td>
      </tr>
    </table>
  </div>
</template>
<style lang="scss" scoped>
.table-box {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center; /* 可选 */
  table {
    width: 90%;
    color: white;
    border-collapse: separate;
    border-spacing: 0 5px; /* 行间距为10像素 */
    td {
      text-align: center;
      padding: 10px;
      border: none;
    }
    .colorTd {
      background-color: #0d1947;
    }
  }
}
</style>
